<template>
  <div class="layout-page pb-32px" v-loading="loading">
    <div class="intro-wrap">
      <div class="w-1328px mx-auto box-border pt-18px">
        <h2 class="font-size-24px lh-40px mb-12px">
          {{ detail.elementTitle || "Title" }}
        </h2>
        <div class="text-light flex items-center font-size-14px">
          <div>
            <span>创建者：</span>
            <span class="link cursor-pointer">{{
              detail?.createUser?.nickName
            }}</span>
          </div>
          <div class="ml-20px">
            <span>创建者公司：</span>
            <span class="text-default">{{
              detail?.createUser?.companyName
            }}</span>
          </div>
          <div class="ml-20px">
            <span>下载次数：</span>
            <span class="text-default">{{ detail.downloadTimes || 0 }}</span>
          </div>
          <div class="ml-20px" v-if="detail.supplyNodeName">
            <span>节点：</span>
            <span class="text-default">{{ detail.supplyNodeName }}</span>
          </div>
        </div>
        <div class="tabs flex mt-24px">
          <div
            v-for="tab in tabList"
            :key="tab.name"
            :class="{ 'is-active': tab.name === activeTab }"
            @click="tabClick(tab.name)"
          >
            {{ tab.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="w-1328px mx-auto">
      <div class="content pt-32px">
        <div class="flex" v-show="activeTab === 'intro'">
          <div class="flex-1 p-20px bg-#f5f5f680">
            <div
              v-html="detail.remark || `暂无${typeName}详细介绍`"
              style="white-space: pre-wrap"
            ></div>
          </div>
          <div class="w-25% ml-32px">
            <h5 class="fw-500 lh-24px mb-20px font-size-16px">
              {{ typeName }}简介
            </h5>
            <div class="font-size-14px simple-intro">
              <div v-if="detail.elementType === 2">
                <span class="text-light">{{ typeName }}框架：</span>
                <span class="text-default">{{ detail.elementFrame }}</span>
              </div>
              <div>
                <span class="text-light">{{ typeName }}来源：</span>
                <span class="tag">{{
                  PROVIDE_DETAIL_FROM_ENUM[detail.elementFrom]
                }}</span>
              </div>
              <div>
                <span class="text-light">是否共享：</span>
                <span class="text-default">{{
                  ELEMENT_SHARE_TYPE_ENUM[detail.elementShareType]
                }}</span>
              </div>
              <div>
                <span class="text-light">创建时间：</span>
                <span class="text-default">{{ detail.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-show="activeTab === 'file'">
          <el-button
            v-if="isCreator"
            type="primary"
            @click="editFile()"
            class="mb-12px"
            >新增</el-button
          >
          <el-table :data="detail.fileList" style="width: 100%" row-key="id">
            <el-table-column label="文件名称" prop="originalFileName">
            </el-table-column>
            <el-table-column label="文件大小" prop="fileSize" />
            <el-table-column label="更新时间" prop="updateTime">
              <template #default="{ row }">{{
                row.updateTime || row.createTime
              }}</template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              prop="status"
              width="150"
            >
              <template #default="{ row }">
                {{ REVIEW_STATUS_ENUM[row.status] }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
              <template #default="{ row }">
                <template v-if="isCreator">
                  <el-button type="text" @click="editFile(row.id)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    class="text-red"
                    @click="removeFile(row.id)"
                    >删除</el-button
                  >
                </template>
                <el-button
                  type="text"
                  :disabled="disabledDownload(row)"
                  @click="doDownLoad(row)"
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <EditPopup
      v-model="visible"
      :id="currId"
      :elementProvideId="$route.query.id"
      @close="visible = false"
      @success="getFileList"
    />
  </div>
</template>

<script setup>
import { useLoading } from "@/hooks";
import {
  PROVIDE_DETAIL_FROM_ENUM,
  ELEMENT_SHARE_TYPE_ENUM,
  REVIEW_STATUS_ENUM,
} from "@/const";
import { useUserStore } from "@/store";
import EditPopup from "./components/addFilePopup.vue";

const route = useRoute();
const typeName = route.query.type === "dataSource" ? "数据集" : "模型";

const tabList = computed(() => [
  { label: `${typeName}介绍`, name: "intro" },
  { label: `${typeName}文件`, name: "file" },
]);
const activeTab = ref("intro");
const tabClick = (name) => {
  activeTab.value = name;
};

const { loading, setLoading } = useLoading();
const detail = ref({});

const $api = inject("$api");
const getDetail = async () => {
  setLoading(true);
  try {
    const { data } = await $api.provide.getCustomerDetail(route.query.id);
    detail.value = {
      ...data,
      fileList: [],
    };
  } finally {
    setLoading(false);
  }
};
const getFileList = async () => {
  const { data } = await $api.provide.getElementFileList({
    pageNum: 1,
    pageSize: 9999,
    elementProvideId: route.query.id,
  });
  detail.value.fileList = data;
};

const userStore = useUserStore();
const isCreator = computed(
  () => detail.value.createUserId === userStore.userInfo?.userId
);
const disabledDownload = computed(() => {
  return (row) => {
    // 公开
    if (detail.value.elementShareType === 1) {
      return !isCreator.value && row.status !== 1;
    } else {
      return detail.value.elementShareType === 0 && !isCreator.value;
    }
  };
});

const visible = ref(false);
const currId = ref("");

const editFile = (id) => {
  currId.value = id;
  visible.value = true;
};
const removeFile = async (id) => {
  await ElMessageBox.confirm("确定要删除该附件吗", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  await $api.provide.removeFile({ ids: id });
  ElMessage.success("删除成功");
  getFileList();
};

const doDownLoad = async (row) => {
  await $api.provide.updateFileDownloadNum(row.id);
  ++detail.value.downloadTimes;
  window.open(row.url);
};

onMounted(async () => {
  await getDetail();
  getFileList();
});
</script>

<style lang="less" scoped>
.intro-wrap {
  background: url("/svg/model-detail-bg.svg") no-repeat center;
}
.tabs > div {
  box-sizing: border-box;
  padding: 10px 15px;
  background: transparent;
  font-size: 14px;
  color: @text-light;
  border: 1px solid transparent;
  border-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
  &.is-active {
    background: #fff;
    color: @text-default;
    border-color: #ccccff99;
  }
}
.simple-intro > div {
  margin-bottom: 12px;
}
.tag {
  padding: 2px 3px;
  border-radius: 4px;
  background: @main-color;
  color: #fff;
  font-size: 12px;
}
</style>
